:root
{
--left-width: max(var(--player-min-width), min(var(--vh) * 16 / 9 / 2, var(--vw) / 2, var(--vw) - var(--chat-min-width) * 3));
--chat-height: max(var(--vh) / 2, var(--chat-min-height));
}

html, body
{
min-width: max(var(--player-min-width) * 2, var(--player-min-width) + var(--chat-min-width) * 3);
min-height: max(var(--player-min-height) * 2, var(--player-min-height) + var(--chat-min-height));
}

.p4, .c4, .m4, .sm4, .ch4
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
width: 0 !important;
height: 0 !important;
}

.p1, .p2, .p3, .c1, .c2, .c3
{
display: block;
}
.p1, .p2
{
top: 0;
right: auto;
bottom: 0;
width: var(--left-width);
height: max(var(--vh) / 2, var(--player-min-height));
}
.p1
{
bottom: auto;
}
.p2
{
top: auto;
}
.p3
{
top: var(--chat-height);
left: var(--left-width);
}

.c1, .c2, .c3
{
bottom: auto;
left: auto;
height: var(--chat-height);
width: calc((var(--vw) - var(--left-width)) / 3);
}
.c1
{
right: calc(2 * (var(--vw) - var(--left-width)) / 3);
}
.c2
{
right: calc((var(--vw) - var(--left-width)) / 3);
border-left: 1px solid Gray;
border-right: 1px solid Gray;
}
.c3
{
right: 0;
}

.m1, .m2, .m3
{
display: block;
}
.m1, .ch1, .m2, .ch2
{
right: calc(var(--vw) - var(--left-width));
}
.sm1, .sm2
{
right: calc(var(--vw) - var(--left-width) + var(--menu-size));
}
.m2, .sm2, .m3, .sm3
{
top: calc(var(--vh) / 2);
}
.ch2, .ch3
{
top: calc(var(--vh) / 2 + var(--menu-size));
}
.m3, .ch3
{
right: 0;
}
.sm3
{
right: var(--menu-size);
}



@media (min-width: 340px) and (max-width: calc(340px * 2 - 1px)) and (min-height: calc(3 * (100px + 200px)))
{
:root
{
--player-height: clamp(var(--player-min-height), var(--vw) * 9 / 16, var(--vh) / 3 - var(--chat-min-height));
}

html, body
{
min-width: min(var(--player-min-width), var(--chat-min-width));
min-height: calc((var(--player-min-height) + var(--chat-min-height)) * 3);
}

.p1, .p2, .p3
{
left: 0;
right: 0;
bottom: auto;
width: auto;
height: var(--player-height);
}
.p1
{
top: 0;
}
.p2
{
top: calc(var(--vh) / 3);
}
.p3
{
top: calc(2 * var(--vh) / 3);
}

.c1, .c2, .c3
{
top: auto;
right: 0;
left: 0;
width: auto;
height: calc(var(--vh) / 3 - var(--player-height));
}
.c1
{
bottom: calc(2 * var(--vh) / 3);
}
.c2
{
bottom: calc(var(--vh) / 3);
border: none;
}
.c3
{
bottom: 0;
}

.m1, .ch1, .m2, .ch2, .m3, .ch3
{
right: 0;
}
.sm1, .sm2, .sm3
{
right: var(--menu-size);
}
.m1, .sm1
{
top: 0;
}
.ch1
{
top: var(--menu-size);
}
.m2, .sm2
{
top: calc(var(--vh) / 3);
}
.ch2
{
top: calc(var(--vh) / 3 + var(--menu-size));
}
.m3, .sm3
{
top: calc(2 * var(--vh) / 3);
}
.ch3
{
top: calc(2 * var(--vh) / 3 + var(--menu-size));
}
}



@media (min-width: calc(340px * 2)) and (max-width: calc(340px * 3 - 1px)) and (min-height: calc(3 * 100px + 2 * 200px))
{
:root
{
--player-height: max(var(--player-min-height), min((var(--vh) - var(--chat-min-height) * 2) / 3, var(--vw) * 9 / 16));
--chat-height: calc((var(--vh) - var(--player-height) * 3) / 2);
}

html, body
{
min-width: max(var(--player-min-width), var(--chat-min-width) * 2);
min-height: calc(var(--player-min-height) * 3 + var(--chat-min-height) * 2);
}

.p1, .p2, .p3
{
left: 0;
right: 0;
bottom: auto;
width: auto;
height: var(--player-height);
}
.p1
{
top: 0;
}
.p2
{
top: calc(var(--player-height) + var(--chat-height));
}
.p3
{
top: auto;
bottom: 0;
}

.c1, .c2, .c3
{
left: 0;
right: 0;
width: auto;
height: var(--chat-height);
}
.c1
{
top: var(--player-height);
right: 0;
bottom: auto;
left: 0;
}
.c2, .c3
{
top: calc(var(--player-height) * 2 + var(--chat-height));
bottom: auto;
width: calc(var(--vw) / 2);
}
.c2
{
right: auto;
border-left: none;
}
.c3
{
left: auto;
}

.m1, .ch1, .m2, .ch2, .m3, .ch3
{
right: 0;
}
.sm1, .sm2, .sm3
{
right: var(--menu-size);
}
.m1, .sm1
{
top: 0;
}
.ch1
{
top: var(--menu-size);
}
.m2, .sm2
{
top: calc(var(--player-height) + var(--chat-height));
}
.ch2
{
top: calc(var(--player-height) + var(--chat-height) + var(--menu-size));
}
.m3, .sm3
{
top: calc(var(--vh) - var(--player-height));
}
.ch3
{
top: calc(var(--vh) - var(--player-height) + var(--menu-size));
}
}



@media (min-width: calc(340px * 3)) and (min-height: calc(3 * 100px + 200px)) and (min-aspect-ratio: 2/3) and (max-aspect-ratio: 1/1)
{
:root
{
--player-height: max(var(--player-min-height), min(var(--vh) / 4, var(--vw) * 9 / 16));
}

html, body
{
min-width: max(var(--player-min-width), var(--chat-min-width) * 3);
min-height: calc(3 * var(--player-min-height) + var(--chat-min-height));
}

.p1, .p2, .p3
{
left: 0;
right: 0;
bottom: auto;
width: auto;
height: var(--player-height);
}
.p1
{
top: 0;
}
.p2
{
top: var(--player-height);
}
.p3
{
top: calc(var(--player-height) * 2);
}

.c1, .c2, .c3
{
top: calc(var(--player-height) * 3);
right: auto;
bottom: 0;
width: calc(var(--vw) / 3);
height: auto;
}
.c1
{
left: 0;
}
.c2
{
left: calc(var(--vw) / 3);
}
.c3
{
right: 0;
}

.m1, .ch1, .m2, .ch2, .m3, .ch3
{
right: 0;
}
.sm1, .sm2, .sm3
{
right: var(--menu-size);
}
.m1, .sm1
{
top: 0;
}
.ch1
{
top: var(--menu-size);
}
.m2, .sm2
{
top: var(--player-height);
}
.ch2
{
top: calc(var(--player-height) + var(--menu-size));
}
.m3, .sm3
{
top: calc(var(--player-height) * 2);
}
.ch3
{
top: calc(var(--player-height) * 2 + var(--menu-size));
}
}



@media (min-width: calc(100px * 3 * 16 / 9 + 340px)) and (min-height: calc(3 * 200px)) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2)
{
:root
{
--chat-width: max(var(--chat-min-width), var(--vw) - var(--vh) * 16 / 9 / 3);
}

html, body
{
min-width: calc(var(--chat-min-height) * (16 + 9) / 9);
min-height: max(var(--player-min-height) * 3, var(--chat-min-height) * 3);
}

.p1, .p2, .p3, .c1, .c2, .c3
{
left: 0;
right: auto;
bottom: auto;
width: calc(var(--vw) - var(--chat-width));
height: calc(var(--vh) / 3);
}
.c1, .c2, .c3
{
left: auto;
right: 0;
width: var(--chat-width);
}

.p1, .c1
{
top: 0;
}
.p2, .c2
{
top: calc(var(--vh) / 3);
}
.p3, .c3
{
top: auto;
bottom: 0;
}
.c2
{
border: none;
}

.m1, .ch1, .m2, .ch2, .m3, .ch3
{
right: var(--chat-width);
}
.sm1, .sm2, .sm3
{
right: calc(var(--chat-width) + var(--menu-size));
}
.m1, .sm1
{
top: 0;
}
.ch1
{
top: var(--menu-size);
}
.m2, .sm2
{
top: calc(var(--vh) / 3);
}
.ch2
{
top: calc(var(--vh) / 3 + var(--menu-size));
}
.m3, .sm3
{
top: calc(2 * var(--vh) / 3);
}
.ch3
{
top: calc(2 * var(--vh) / 3 + var(--menu-size));
}
}